<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              placeholder="输入项目名称"
              clearable
              v-model="filterField.projectName"
              @blur="filterField.projectName = changeValue($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务状态" class="row-padding-bottom">
            <el-select
              v-model="filterField.state"
              placeholder="请选择"
              clearable
            >
              <el-option label="未开通" value="NOT_OPEN" />
              <el-option label="正常" value="NORMAL" />
              <el-option label="服务即将到期" value="SERVICE_ABOUT_EXPIRE" />
              <el-option label="服务到期" value="SERVICE_DUE" />
              <el-option label="已禁用" value="DISABLED" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 列表 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="startDate"
            label="开始时间"
            :formatter="formatTd"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="endDate"
            label="截止时间"
            :formatter="formatTd"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="state"
            label="服务状态"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.state == 'NOT_OPEN'">未开通</span>
              <span v-if="scope.row.state == 'NORMAL'">正常</span>
              <span v-if="scope.row.state == 'DISABLED'">禁用</span>
              <span v-if="scope.row.state == 'SERVICE_DUE'">服务到期</span>
              <span v-if="scope.row.state == 'SERVICE_ABOUT_EXPIRE'"
                >服务即将到期</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="230"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>

          <el-table-column align="left" label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-if="scope.row.state == 'NOT_OPEN'"
                @click="openService(scope.row)"
                >开通</el-link
              >
              <el-link
                type="primary"
                v-if="
                  [
                    'SERVICE_DUE',
                    'SERVICE_ABOUT_EXPIRE',
                    'NORMAL',
                    'DISABLED',
                  ].includes(scope.row.state)
                "
                @click="continueService(scope.row)"
                >续期</el-link
              >
              <el-link
                type="primary"
                v-if="
                  ['SERVICE_ABOUT_EXPIRE', 'NORMAL'].includes(scope.row.state)
                "
                @click="forBidService(scope.row)"
                >禁用</el-link
              >
              <el-link
                type="primary"
                v-if="['DISABLED'].includes(scope.row.state)"
                @click="startService(scope.row)"
                >启用</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>

    <!---开通服务-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showOpen"
      :close-on-click-modal="false"
      @close="operatorHandleClose"
      custom-class="dialog-minwidth"
      :append-to-body="true"
      :modal-append-to-body="false"
      width="800px"
    >
      <el-form
        :model="openData"
        label-width="100px"
        ref="operatorFormData"
        class="form"
        :rules="openDataRules"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                placeholder="请输入操作人姓名"
                readonly=""
                v-model="openData.projectName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择时间"
                v-model="openData.startDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择时间"
                v-model="openData.endDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="openData.remark"
                maxlength="300"
                row="3"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="operatorHandleClose" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveOperator"
          class="save"
          :loading="isOperatorLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'projectServiceManage',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '项目服务管理',
      advanced: false,
      requestUrl: 'api-p/projectserve/base/getListByPage', //表格请求路径。
      loading: false,
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        projectName: '',
        state: '',
      },
      pageSize: 20,
      pageNo: 1,
      dialogTitle: '开通服务',
      showOpen: false,
      openData: {
        userId: '',
        Id: '',
        projectId: '',
        projectName: '',
        startDate: '',
        endDate: '',
        remark: '',
      },
      openDataRules: {
        startDate: [
          { required: true, message: '请选择开始时间', trigger: 'change' },
        ],
        endDate: [
          { required: true, message: '请选择截止时间', trigger: 'change' },
        ],
        remark: [{ message: '最多可输入300个字', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {},
  methods: {
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    // 复制
    copy(companyName) {
      let url = companyName
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      // console.log(oInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success',
      })
      oInput.remove()
    },
    //开启服务
    openService(item) {
      this.showOpen = true
      this.dialogTitle = '开通服务'
      this.openData = {
        userId: item.userId,
        id: item.id,
        projectId: item.projectId,
        projectName: item.projectName,
        startDate: '',
        endDate: '',
        remark: '',
      }
    },
    //服务续签
    continueService(item) {
      this.showOpen = true
      this.dialogTitle = '修改服务信息'
      this.openData = {
        userId: item.userId,
        id: item.id,
        projectId: item.projectId,
        projectName: item.projectName,
        startDate: item.startDate,
        endDate: item.endDate,
        remark: item.remark,
      }
    },
    //取消保存
    operatorHandleClose() {
      this.showOpen = false
      this.openData = {
        userId: '',
        Id: '',
        projectId: '',
        projectName: '',
        startDate: '',
        endDate: '',
        remark: '',
      }
    },
    //
    saveOperator() {
      this.$refs.operatorFormData.validate((valid) => {
        if (valid) {
          let params = {
            userId: this.openData.userId,
            State: 'NORMAL',
            Id: this.openData.id,
            projectId: this.openData.projectId,
            startDate: this.openData.startDate,
            endDate: this.openData.endDate,
            remark: this.openData.remark,
          }
          this.changeProjectStatus(params, this.openData.id ? 4 : 3)
        } else {
          return false
        }
      })
    },
    startService(item) {
      this.$confirm('你确定要启用该项目吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.changeProjectStatus(
            {
              userId: item.userId,
              State: 'NORMAL',
              Id: item.id,
              projectId: item.projectId,
            },
            2
          )
        })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    forBidService(item) {
      this.$confirm('你确定要禁用该项目吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.changeProjectStatus(
            {
              userId: item.userId,
              State: 'DISABLED',
              Id: item.id,
              projectId: item.projectId,
            },
            2
          )
        })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    changeProjectStatus(params, types) {
      this.axios.post('api-p/projectserve/base/update', params).then((res) => {
        if (!res.data.hasError) {
          if (types == 1) {
            this.$message.success('项目启用成功')
          } else if (types == 2) {
            this.$message.success('项目禁用成功')
          } else if (types == 3) {
            this.$message.success('项目服务启用成功')
            this.operatorHandleClose()
          } else if (types == 4) {
            this.$message.success('项目服务续期成功')
            this.operatorHandleClose()
          }
          this.searchTable()
        } else {
          this.$message.warning(res.data.errorMsg)
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.container {
  .selectWidth {
    width: 100%;
  }
  .titleBox {
    border: none;
    background: #e4ebf1;
    padding: 14px 24px;
    margin-bottom: 0px;
    .listAddBtn {
      width: 136px;
      background: #009588;
      border: none;
    }
    .listAddBtn:hover {
      background: #009588;
      border-color: #009588;
      opacity: 0.8;
    }
    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
    }
  }
}
.dialogTitle p {
  color: #333;
  font-size: 18px;
  line-height: 24px;
  span {
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
}
</style>
